<template>
  <v-list-item
      :prepend-avatar="exercise.videoUrl || defaultExerciseIcon"
      :title="exercise.name"
  >
    <!-- 副标题区域 -->
    <template v-slot:subtitle>
      <!-- 非编辑模式 -->
      <div v-if="!isEditMode">
        <span>{{ exercise.setsAndReps }}</span>
        <v-chip size="small" color="blue-lighten-4" class="ml-2">
          组间休息 {{ exercise.restSeconds }} 秒
        </v-chip>
      </div>
      <!-- 编辑模式 -->
      <div v-else class="d-flex align-center mt-2">
        <v-btn size="x-small" icon="mdi-minus" @click.stop="emit('adjustSets', -1)" title="减少组数"></v-btn>
        <span class="mx-3 font-weight-bold">{{ exercise.setsAndReps }}</span>
        <v-btn size="x-small" icon="mdi-plus" @click.stop="emit('adjustSets', 1)" title="增加组数"></v-btn>
      </div>
    </template>

    <!-- 右侧按钮区域 -->
    <template v-slot:append>
      <!-- 编辑模式 -->
      <div v-if="isEditMode">
        <v-btn icon="mdi-swap-horizontal" variant="text" color="blue" @click.stop="emit('openReplace')" title="替换动作"></v-btn>
        <v-btn icon="mdi-delete" variant="text" color="red" @click.stop="emit('remove')" title="删除动作"></v-btn>
      </div>
      <!-- 非编辑模式 -->
      <v-btn v-else-if="exercise.videoUrl" icon="mdi-play-circle-outline" variant="text" color="primary" @click.stop="emit('playVideo')" title="播放教学视频"></v-btn>
    </template>
  </v-list-item>
</template>

<script setup>
import { ref } from 'vue';

// 定义组件接收的属性 (props)
defineProps({
  exercise: {
    type: Object,
    required: true,
  },
  isEditMode: {
    type: Boolean,
    default: false,
  },
});

// 定义组件可以触发的自定义事件 (emits)
const emit = defineEmits([
  'adjustSets',
  'remove',
  'openReplace',
  'playVideo',
]);

const defaultExerciseIcon = ref('https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png');
</script>